<!--
 * @Description: 返回/首页组件（自定义头部时，补充返回/首页按钮）
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-10-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2023-10-22
-->
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  import { commonPng } from '@/enum/imageEnum'
  import { HOME_PAGE } from '@/enum/pageEnum'

  /** 距离顶部距离 */
  const headerTop = ref(0)
  /** 类型：back-返回, home-首页 */
  const type = ref('')

  onMounted(() => {
    headerTop.value = uni.getMenuButtonBoundingClientRect().top
    if (getCurrentPages().length === 1) type.value = 'home'
    else type.value = 'back'
  })

  /**
   * 返回首页/上一页
   */
  const goBack = () => {
    if (type.value === 'home') uni.reLaunch({ url: HOME_PAGE })
    else uni.navigateBack()
  }
</script>

<template>
  <view class="back" :style="{ top: headerTop + 'px' }" @click="goBack()">
    <image class="back-img" :src="type === 'home' ? commonPng.customHome : commonPng.customBack" />
  </view>
</template>

<style lang="less" scoped>
  .back {
    position: fixed;
    left: 32rpx;
    z-index: 98;
    width: 20rpx;
    height: 32rpx;

    > .back-img {
      width: 20rpx;
      height: 32rpx;
    }
  }
</style>
